<?xml version="1.0" encoding="UTF-8" ?>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/includefile.jsp"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="${basePath}/css/bootstrap-image-gallery/bootstrap-image-gallery.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="http://blueimp.github.io/Gallery/css/blueimp-gallery.min.css" type="text/css"/>
<link href="${basePath}/css/bootstrap-image-gallery/demo.css" rel="stylesheet" type="text/css" />
<script src="http://blueimp.github.io/Gallery/js/jquery.blueimp-gallery.min.js"></script>
<script src="${basePath}/js/bootstrap-image-gallery/bootstrap-image-gallery.min.js"></script>
<script src="${basePath}/js/bootstrap-image-gallery/demo.js"></script>
<style>
body{
font-family:"Hiragino Sans GB","Microsoft YaHei","微软雅黑",tahoma,arial,simhei,"黑体";
}
</style>
<title>单文件上传</title>
</head>
<body class="skin-blue">

<div class="wrapper">

 <header class="main-header">
 <s:action name="main!navbar" executeResult="true"></s:action>
 </header>
 <aside class="main-sidebar">
   <s:action name="main!menu" executeResult="true"></s:action>
 </aside>


<div class="content-wrapper">
<!-- 页面标题 start -->
 <section class="content-header">
   <h1>文件浏览<small>图片浏览</small></h1>
   <ol class="breadcrumb">
      <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
      <li><a href="#">文件浏览</a></li>
      <li class="active">图片浏览</li>
   </ol>
 </section>
 <!-- 页面标题 end -->
 <hr/>
 <form class="form-inline col-sm-offset-1" style="margin-top:20px;">
     <div class="form-group">
       <button id="image-gallery-button" type="button" class="btn btn-primary btn-lg">
         <i class="glyphicon glyphicon-picture"></i>
                                                 普通模式
       </button>
     </div>
     <div class="btn-group" data-toggle="buttons">
       <label class="btn btn-success btn-lg">
        <i class="glyphicon glyphicon-leaf"></i>
          <input id="borderless-checkbox" type="checkbox"/> Borderless
       </label>
       <label class="btn btn-primary btn-lg">
        <i class="glyphicon glyphicon-fullscreen"></i>
       <input id="fullscreen-checkbox" type="checkbox"/> 全屏
      </label>
    </div>
 </form>
 
 <!-- 页面内容 start -->
 <section class="content">
   <div class='row'>
     <div class='col-md-12'>
       <div class="box box-primary">
         <div class="box-header">
            <i class="fa fa-edit"></i>
            <h3 class="box-title">图片浏览</h3>
         </div>
         <div class="box-body pad table-responsive">
           <div id="links">
           <s:iterator value="picInfoList" var="info">
           <div class="col-sm-2">
            <a href="${info.picUploadAddress}" title="${info.picName}" data-gallery>
            <img src="${info.picUploadAddress}" class="img-thumbnail" style="width:140px;height:140px;"/>
            </a>
           </div>
           </s:iterator>
           </div>
         </div>
       </div>
     </div>
   </div>
 </section>
 <!-- 页面内容 end -->
 
 <div id="blueimp-gallery" class="blueimp-gallery">
    <!-- The container for the modal slides -->
    <div class="slides"></div>
    <!-- Controls for the borderless lightbox -->
    <h3 class="title"></h3>
    <a class="prev">‹</a>
    <a class="next">›</a>
    <a class="close">×</a>
    <a class="play-pause"></a>
    <ol class="indicator"></ol>
    <!-- The modal dialog, which will be used to wrap the lightbox content -->
    <div class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" aria-hidden="true">&times;</button>
                    <h4 class="modal-title"></h4>
                </div>
                <div class="modal-body next">
				</div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default pull-left prev">
                        <i class="glyphicon glyphicon-chevron-left"></i>
                        Previous
                    </button>
                    <button type="button" class="btn btn-primary next">
                        Next
                        <i class="glyphicon glyphicon-chevron-right"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
</div>
</body>
</html>
		